<template>
  <view>
    <zero-loading v-if="loading"></zero-loading>
    <view v-else class="tags">
      <bar class="tag-bar" :propdata="data"></bar>
        <scroll-view class="tag-box" enable-flex="true" scroll-y="true">
          <view v-for="(item,index) in data" class="tag-item" :key="index">

            <navigator :url="'/subpkg/tagbook/tagbook?tag=' + item._id">
              <image src="../../static/icons/tag.png" class="tag-item-img"></image>
              <text class="tag-item-text">{{item._id}} - ({{item.count}})</text>
            </navigator>
          </view>
          </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getTags()
    },
    data() {
      return {
        loading: true,
        data: []
      };
    },
    methods: {
      getTags() {
        uni.$req.req(this, 'gettags').then((res) => {
          this.data = res.result.data
        })
      }
    }
  }
</script>

<style lang="scss">

.tags{
  position: relative;
  display: flex;
  height: 100vh;
  align-items: center;
  flex-direction: column;
}
  .tag-box {
    position: absolute;
    bottom: 0px;
    height: calc(100vh - 750rpx);
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to top, #ffffff, #6dd5fa, #2980b9);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    box-shadow: 0px -3px 2px 2px #0099f7;
    
    .tag-item {
      background: linear-gradient(to right, #f11712, #0099f7);
      border-radius: 15px;
      box-shadow: 0px 0px 1px 2px #abccd5;
      margin: 10px;
      padding: 5px;
      border: 1px solid #aaa;

      .tag-item-img {
        vertical-align: text-bottom;
        width: 30px;
        height: 30px;
      }

      .tag-item-text {
        font-size: 18px;
        color: #fff;
      }
    }

  }

 
</style>
